import React, { Component } from 'react'
import {withRouter, NavLink} from 'react-router-dom'
import '../css/Bottom.css'
class Bottom1 extends Component {
  changePage(url){
    this.props.history.push(url)
  }
  render() {
    return (
      <div className="bottom">
        {/* <div className={this.props.location.pathname === '/shop'?'active icon':'icon'} onClick={()=>this.changePage('/shop')}>商城</div>
        <div className={this.props.location.pathname === '/cate'?'active icon':'icon'} onClick={()=>this.changePage('/cate')}>分类</div>
        <div className={this.props.location.pathname === '/cart'?'active icon':'icon'} onClick={()=>this.changePage('/cart')}>购物车</div>
        <div className={this.props.location.pathname === '/my'?'active icon':'icon'} onClick={()=>this.changePage('/my')}>我的</div> */}
        <NavLink to="/shop" className="icon">商城</NavLink>
        <NavLink to="/cate" className="icon">分类</NavLink>
        <NavLink to="/cart" className="icon">购物车</NavLink>
        <NavLink to="/my" className="icon">我的</NavLink>
      </div>
    )
  }
}
// 路由组件（被Route包裹的）和非路由组件（没有被Route包裹的）
// 非路由组件中没有路由相关的方法，比如push
// 通过withRouter方法，给非路由组件加入路由相关的方法和属性
const Bottom = withRouter(Bottom1)
export default Bottom
